<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app" style="color: red;font-size: 20px;">Hello {{ message }}<h1>张三</h1></div>
  <script src="dist/vue.js"></script>
  <script>
    // umd Vue
    // console.log(Vue);
    // 响应式 vue2 mvvm
    let vm = new Vue({
      el: '#app',
      // data: {} // 或者
      data() {
        // console.log('this指向', this);
        return {
          message: 'viking',
          a: { b: 20 },
          list: [ 1, 2, 3 ],
          arr: [{ a: 1 }]
        }
      }
    })
    // .$mount('#app')  在实例对象后加这个 和 el: '#app'的作用是一样的，声明周期有讲
    // console.log('劫持', vm._data.arr.push({c:4}), vm._data);
    // vue初次渲染 => 初始化数据 =》将模板进行编译 =》变成render() => 生成虚拟节点 =》变成真实节点 =》放到页面
    // vue 模板编译 template render el(必须要有)，先走render 然后走template
  </script>
</body>
</html>